<template>
  <li class="comstatusli">
    <div class="readtitle" ref="rtitle" :style="item.id===lastid&&comonreadstlast?'border-bottom:none':'border-bottom:0.03rem solid #e6e6e6'">
      <div class="readtitleft">{{item.activity_name}}</div>
      <div class="readtime" v-if="item.state===3||item.state===4">{{item.start_date}}</div>
      <div class="readtime" v-else @click="lookmore($event,item.id)">查看更多<span v-if="item.showmore" class="iconfont">&#xe66a;</span><span
        v-else class="iconfont">&#xe638;</span></div>
    </div>
    <ul class="readinfo">
      <li v-for="child in item.user_list" :key="">
        <div class="readuserinfo">
          <div class="userleftread">
            <div class="readuserimg">
              <img class="borrad50" :src="child.avatar" alt=""/>
              <div v-if="child.ifleveimg===1" class="userlevel"><img
                src="../../assets/img/CommonreadAction/copy-2@3x.png" alt=""></div>
            </div>
            <div class="readusername">{{child.nick_name}}</div>
          </div>
          <div class="readusercomponent" v-if="child.cur_day_status===2">
            <div class="usercomicon"><span class="iconfont">&#xe666;</span></div>
            <div class="usercomtext">已打卡</div>
          </div>
          <div class="readusercomponent" v-else-if="child.cur_day_status===1">
            <div class="usercomicon"><span class="nodaka iconfont">&#xe69e;</span></div>
            <div class="usercomtext">未打卡</div>
          </div>
          <div class="readusercomponent" v-else>
            <div class="usercomicon"><span class="nodaka iconfont">&#xe69e;</span></div>
            <div class="usercomtext">未阅读</div>
          </div>
        </div>
        <div class="userreadjuti">
          <div class="userreadone">
            <div class="oneicon timemar"><span class="iconfont">&#xe692;</span></div>
            <div class="onetext">今日阅读{{Math.floor(child.read_timestamp/60000)}}分钟</div>
          </div>
          <div class="userreadone margin2">
            <div class="oneicon"><span class="iconfont">&#xe676;</span></div>
            <div class="onetext">累积共读{{child.read_day}}天 | 打卡{{child.clock_day}}天</div>
          </div>
        </div>
      </li>
    </ul>
    <div v-if="item.state===4" class="statecontent">
      <div class="starttime"><span class="iconfont">&#xe6a1;</span></div>
      <div class="starttext">距共读活动开始还有{{item.startday}}天</div>
    </div>
    <transition
      name="bouncemode">
      <div v-if="item.showmore&&item.state===0" class="statecontent">
        <div class="actionover"><span class="iconfont">&#xe693;</span></div>
        <p class="overtext">
          共读活动已结束，<br>
          你和好友未完成共读任务，<br>
          继续加油～
        </p>
        <div class="btns">
          <btn :obj='btnstyle' :text="textbtn" v-on:statr="goCommonBuy"></btn>
        </div>
      </div>
    </transition>
    <transition
      name="bouncemode">
      <div v-if="item.showmore&&item.state===1" class="statecontent">
        <div class="completeimg"><img src="../../assets/img/ComreadState/name@3x.png" alt=""></div>
        <p class="completetext">
          <span>共读活动已结束，</span><br>
          <span>恭喜你们完成共读任务～</span>
        </p>
        <div class="btns">
          <btn :obj='btnstyle' :text="textbtn1" v-on:statr="shareCard(item.id)"></btn>
        </div>
      </div>
    </transition>
    <div style="display: none;">{{randnum}}</div>
  </li>
</template>

<script>

  export default {
    name: 'index',
    data: function () {
      return {
        items: [],
        isshare: false,
        isAction: false,
        textbtn: '继续共读',
        textbtn1: '分享成就',
        btnstyle: {
          opacity: 1,
          width: '80%',
          boxShadow: '0 10px 24px 0 rgba(255, 90, 95, 0.4)',
          height: '4.5rem',
          background: '#ff5a5f'
        },
        randnum:0
      }
    },
    mounted: function () {

    },
    props:['item','lastid','comonreadstlast'],
    methods: {
      lookmore: function (e,n) {
        this.randnum++
        let comonreadstats = JSON.parse(localStorage.getItem('commonread_stats_showmore')) || {}
        if (comonreadstats && comonreadstats[n]) {
          comonreadstats[n] = !comonreadstats[n]
          window.localStorage.setItem('commonread_stats_showmore', JSON.stringify(comonreadstats))
        } else {
          comonreadstats[n] = true
          window.localStorage.setItem('commonread_stats_showmore', JSON.stringify(comonreadstats))
        }
        this.item.showmore = !this.item.showmore
        if(n===this.lastid){
          if(this.item.showmore){
            e.target.parentNode.style.borderBottom = '0.03rem solid #e6e6e6'
          }else{
            e.target.parentNode.style.borderBottom = 'none'
          }
        }
      },
      goCommonBuy:function(){
        this.go('ComreadInvitecodeBuy')
      },
      shareCard:function(id){
        var shareCardParms = {
          activity_id:id
        }
        this.go('ActivateCard',shareCardParms)

      },
      go: function (name, obj) {
        this.$router.push({
          name: name,
          query: obj || {}
        })
      }
    },
    components: {
      btn: () => import('../btn/index'),
    }
  }
</script>

<style scoped>
  @import "../../assets/css/components/CommonReadStatus/index.css";


</style>
